<!DOCTYPE html>
<html>

<head>
	<title>实现一个简单的弹出式窗口</title>
	<link rel="stylesheet" href="../include/ol.css" type="text/css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
	<script src="../include/ol.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	<style>
		#marker {
			width: 20px;
			height: 20px;
			border: 1px solid #088;
			border-radius: 10px;
			background-color: #0ff;
			opacity: 0.5;
		}

		#vienna {
			text-decoration: none;
			color: white;
			font-size: 11pt;
			font-weight: bold;
			text-shadow: black 0.1em 0.1em 0.2em;
		}

		.popover-content {
			min-width: 180px;
		}
	</style>
</head>

<body>
	<div id="map" class="map"></div>
	<div style="display: none;">
		<!-- 维也纳地名标签 -->
		<a class="overlay" id="vienna" target="_blank"
			href="https://baike.baidu.com/item/%E7%BB%B4%E4%B9%9F%E7%BA%B3/6412?fr=aladdin">维也纳</a>
		<div id="marker" title="Marker"></div>
		<!-- 弹出窗口 -->
		<div id="popup" title="欢迎使用 OpenLayers"></div>
	</div>
	<script>
		var layer = new ol.layer.Tile({
			source: new ol.source.OSM()
		});

		var map = new ol.Map({
			layers: [layer],
			target: "map",
			view: new ol.View({
				center: [0, 0],
				zoom: 2
			})
		});

		var pos = ol.proj.fromLonLat([16.3725, 48.208889]);
		//代表维也纳的标记
		var marker = new ol.Overlay({
			position: pos,
			positioning: "center-center",
			element: document.getElementById("marker"),
			stopEvent: false
		});
		map.addOverlay(marker);

		var vienna = new ol.Overlay({
			position: pos,
			element: document.getElementById("vienna")
		});
		map.addOverlay(vienna);
		// 显示用户点击位置经纬度的弹窗
		var popup = new ol.Overlay({
			element: document.getElementById("popup")
		});
		map.addOverlay(popup);

		map.on("click", function (evt) {
			var element = popup.getElement();
			var coordinate = evt.coordinate;
			var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

			$(element).popover("destroy");
			popup.setPosition(coordinate);
			$(element).popover({
				placement: "top",
				animation: false,
				html: true,
				content: "<p>您点击的位置，坐标是:</p><code>" + hdms + "</code>"
			});
			$(element).popover("show");
		});

	</script>
</body>

</html>